<template>
	<view class="content">
		<!-- 二手房搜索 -->
		<view class="search-cont">
			<HMfilterDropdown
				:menuTop="100"
				:filterData="filterData"
				:defaultSelected="defaultSelected"
				:updateMenuName="true"
				@confirm="confirm"
				dataFormat="Object"
			></HMfilterDropdown>

			<view class="publish-frame">
				<block v-for="(item, index) in secHouseArr" :key="index">
					<view class="publish-cata" @click="showDetail(item)">
						<view class="publish-img"><image :src="item.housing.imageInfoList[0].imagePath" mode="" class="img"></image></view>
						<view class="publish-title">
							<view class="title-primary">
								<text v-model="title">{{ item.title }}</text>
							</view>

							<view class="title-detail">
								<text v-model="region">{{ item.residential.region }}</text>
								<text v-model="measure">{{ item.housing.measure }}㎡</text>
								<text v-model="orientation">{{ item.housing.orientation }}</text>
							</view>

							<view class="title-tag">
								<block v-for="(itemLabel, index) in item.sellLabels" :key="index">
									<text>{{ itemLabel }}</text>
								</block>
							</view>

							<view class="title-pri">
								<text v-model="price">{{ item.housing.price }}万元</text>
								<text v-model="unitPrice">{{ item.housing.unitPrice }}元/平方</text>
							</view>
						</view>
					</view>
				</block>
			</view>
			
			<!-- 反馈组件 -->
			<tips ref="tips"></tips>
		</view>
	</view>
</template>

<script>
// 引入接口
import { listing } from '../../../api/api.js';
import { publicing } from '../../../api/api.js';
// 引入请求地址
import { getSecHouseUrl } from '../../../api/request.js';
// 引入筛选组件
import HMfilterDropdown from '../../../components/HM-filterDropdown/HM-filterDropdown.vue';
//筛选菜单数据
import data from '../../../common/data.js';
// 引入vuex的mapstate
import { mapState } from 'vuex';
// 解构console
var { log } = console;
// 引入反馈组件
import tips from '../../../element/tips.vue'

export default {
	// 注册组件
	components: {
		HMfilterDropdown: HMfilterDropdown,tips
	},

	data() {
		return {
			type: '',	// 0出租 1出售二手房
			secHouseArr: [],
			filterData: [],
			defaultSelected: [],
			residentialName: '', // 搜索关键词 小区名
			residential:'',
			region: '', // 区域（城市、地区）
			price: '', // 价格
			roomNum: '', // 户型
			measure: '', // 面积
			renovation: '' ,// 装修
			userId:'',	// 用户标识
		};
	},
	
	methods: {
		// 初始化: 获取二手房列表
		selectSecHouseList() {
			// 0租房/1二手房
			let data = {
				housingType: this.type,
				userId:this.userId
			};

			publicing(getSecHouseUrl, data)
				.then(res => {
					log(res)
					if(res.data.message == "获取数据为空"){
						this.secHouseArr = []
						let bull = true
						this.setTips(bull)
					}else{
						let bull = false
						this.setTips(bull)
						
						this.listArr = res.data.data;
						if (this.listArr) {
							var index = this.listArr.findIndex(item => {
								log("4444444444444444:"+JSON.stringify(item))
								// 0租房/1二手房
								if (item.housing.housingType == 1 && item.housing.housingId !== this.housingId) {
									this.secHouseArr.push(item);
								} 
							
								
								
								// if (item.housing.housingId !== this.housingId) {
								// 	this.secHouseArr.push(item);
								// }
							});
								
								
						}
						
						
						
						
						// this.secHouseArr = res.data.data;
					}
				})
				.catch(err => {
					log(err);
				});
		},
		
		// 反馈提示
		setTips(bull){
			this.$nextTick(function(){
				this.$refs.tips.init(bull)
			})
		},

		// 筛选框完成:接收菜单结果
		confirm(e) {
			this.indexArr = e.index;
			this.valueArr = e.value;
			console.log('筛选框传入的值' + this.valueArr);

			let strReg = new RegExp('"', 'g'); // 去除""符号的正则
			let priReg = new RegExp('万', 'g'); // 去除"万"符号的正则
			let botReg = new RegExp('以下', 'g'); // 去除"以下"符号的正则
			let topReg = new RegExp('以上', 'g'); // 去除"以上"符号的正则
			let roomReg = new RegExp('室', 'g'); // 去除"室"符号的正则
			let meaReg = new RegExp('㎡', 'g'); // 去除"㎡"符号的正则

			let reRion = JSON.stringify(this.valueArr[0][1]); // 区域
			let prIce = JSON.stringify(this.valueArr[1][0][0]); // 价格
			let rooMnum = JSON.stringify(this.valueArr[2][0][0]); // 户型
			let meaSure = JSON.stringify(this.valueArr[3][0][0]); // 面积
			let renovaTion = JSON.stringify(this.valueArr[3][1][0]); // 装修
			/*
			 *	##区域
			 *	默认无值 -> ""
			 *   不限		-> ""
			 *   有值 	-> 去除""字符串
			 */
			if (this.valueArr[0][1] == null) {
				this.region = '';
			} else if (reRion == '"不限"') {
				this.region = '';
			} else {
				this.region = reRion.replace(strReg, '');
			}
			log('区域的值:' + this.region);

			/*
			 *	##价格
			 *	 默认无值 -> ""
			 *   不限		-> ""
			 *   有值
			 * 		包含"以下" "万"	-> 去除"以下" "万"
			 * 		包含"以上" "万"	-> 去除"以上" "万"
			 * 		包含"万"			-> 去除"万"
			 * 		去除""字符串
			 */
			if (JSON.stringify(this.valueArr[1][0]) == '[]') {
				this.price = '';
			} else if (prIce == '"不限"') {
				this.price = '';
			} else if (prIce.indexOf('以下') !== -1) {
				let priceR = prIce.replace(priReg, '');
				this.price = priceR.replace(botReg, '');
			} else if (prIce.indexOf('以上') !== -1) {
				let priceR = prIce.replace(priReg, '');
				this.price = priceR.replace(topReg, '');
			} else {
				let price = prIce.replace(priReg, '');
				this.price = price;
			}
			this.price = this.price.replace(strReg, '');
			log('价格的值:' + this.price);

			/*
			 *	##户型
			 *	 默认无值 -> 0
			 *   不限	 -> 0
			 *   有值
			 * 		包含"以上"	-> 6
			 * 		其余去除'室' 去除""字符串 转整数类型
			 */
			if (JSON.stringify(this.valueArr[2][0]) == '[]') {
				this.roomNum = 0;
			} else if (rooMnum == '"不限"') {
				this.roomNum = 0;
			} else if (rooMnum.indexOf('以上') !== -1) {
				this.roomNum = 6;
			} else {
				let room = rooMnum.replace(roomReg, '');
				let roomNum = room.replace(strReg, '');
				this.roomNum = parseInt(roomNum);
			}
			log('户型的值:' + this.roomNum);

			/*
			 *	##面积
			 *	 默认无值 -> ""
			 *   不限	 -> ""
			 *   有值
			 * 		包含"以上" "㎡"	-> 去除
			 */
			if (JSON.stringify(this.valueArr[3][0]) == '[]') {
				this.measure = '';
			} else if (meaSure == '"不限"') {
				this.measure = '';
			} else {
				let mea = meaSure.replace(meaReg, '');
				let measure = mea.replace(topReg, '');
				this.measure = measure;
			}
			this.measure = this.measure.replace(strReg, '');
			log('面积的值:' + this.measure);

			/*
			 *	##装修
			 *	 默认无值 -> ""
			 *   不限	 -> ""
			 *   有值
			 * 		包含"以上" "㎡"	-> 去除
			 */
			if (JSON.stringify(this.valueArr[3][1]) == '[]') {
				this.renovation = '';
			} else if (renovaTion == '"不限"') {
				this.renovation = '';
			} else {
				this.renovation = renovaTion.replace(strReg, '');
			}
			log('装修的值:' + this.renovation);

			let data = {
				housingType: this.type, // 0租房/1二手房
				region: this.region,
				price: this.price,
				roomNum: parseInt(this.roomNum),
				measure: this.measure,
				renovation: this.renovation,
				userId:this.userId
			};

			publicing(getSecHouseUrl, data)
				.then(res => {
					if(res.data.message == '获取数据为空'){
						this.secHouseArr = []
						let bull = true
						this.setTips(bull)
					}else{
						let bull = false
						this.setTips(bull)
						this.secHouseArr = res.data.data;
					}
				})
				.catch(err => {
					log(err);
				});
		},

		// 点击二手房: 获取二手房详情信息
		showDetail(item) {
			let obj = {
				title: item.title,
				labels: item.labels,
				price: item.housing.price,
				roomNum: item.housing.roomNum,
				officeNum: item.housing.officeNum,
				measure: item.housing.measure,

				unitPrice: item.housing.unitPrice,
				floor: item.housing.floor,
				louhu: item.housing.louhu,
				residentialName: item.residential.residentialName,
				orientation: item.housing.orientation,
				renovation: item.housing.renovation,

				years: item.residential.years,
				architectureType: item.residential.architectureType,
				greeningRate: item.residential.greeningRate,
				residentialMeasure: item.residential.residentialMeasure,
				propertyName: item.residential.propertyName,
				plotRatio: item.residential.plotRatio,
				type: this.type,
				// 经度
				longitude:item.residential.longitude,
				// 维度
				latitude:item.residential.latitude,
				// 房源图片集合
				imageInfoList:item.housing.imageInfoList,
				housingId:item.housing.housingId,
			};
			// 路径带数据不能带对象,数组只能是字符串
			let objStr = JSON.stringify(obj);
			log('跳转详情页面的值:' + objStr);
			wx.navigateTo({
				url: 'detail?obj=' + objStr
			});
		}
	},

	// 接收首页面的路径数据
	onLoad(e) {
		let objdata = JSON.parse(e.obj);
		this.type = objdata.type;
		this.userId = objdata.openid;
		if(this.userId == undefined){
			this.userId = ''
		}
		
		console.log('父组件传入的type值:' + this.type);
		
		// 定时器模拟ajax异步请求数据
		setTimeout(() => {
			this.filterData = data;
		}, 100);
	},
	
	// 初始化函数
	mounted() {
		this.selectSecHouseList();
	},
	
	// 属性改变是触发(需要注意的是:一开始触发了两次,之后再进行页面初始化)
	computed: {
		// 从数据仓库中取出子页面值
		...mapState(['searchdata']),
		
		getStr() {
			this.residential = this.searchdata.searchstr;
			log('数据仓库取出来的值:'+this.residential)
		}
	},
	
	// 侦听器
	watch:{
		residential(newValue,oldValue){
			this.residentialName = newValue
			let data = {
				residentialName: this.residentialName,
				housingType: this.type,
				userId:this.userId
			};
			
			publicing(getSecHouseUrl, data)
				.then(res => {
					if(res.data.message == '获取数据为空'){
						this.secHouseArr = []
						let bull = true
						this.setTips(bull)
					}else{
						let bull = false
						this.setTips(bull)
						this.secHouseArr = res.data.data;
					}
				})
				.catch(err => {
					log(err);
				});
		}	
	}
};
</script>

<style>
.content {
	margin: 0 30upx;
	background-color: #ffffff;
}

/* 搜索框 */
.search {
	width: 100%;
	height: 90upx;
	line-height: 90upx;
	border-radius: 20upx;
	background: #ffffff;
}
.search input {
	padding-left: 30upx;
	height: 90upx;
	line-height: 90upx;
	width: 100%;
	font-size: 30upx;
	color: #666666;
}

/* 二手房列表展示 */
.publish-frame {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-top: 215upx;
}
.publish-cata {
	width: 100%;
	display: flex;
	margin-bottom: 20upx;
}
.publish-img {
	width: 200upx !important;
	height: 200upx;
}
.img {
	width: 200upx !important;
	height: 100%;
	border-radius: 20upx;
}
.publish-title {
	margin-left: 20upx;
	display: flex;
	flex-direction: column;
}
.title-primary {
	font-size: 30upx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.title-detail {
	margin: 10upx 0 10upx -10upx;
	font-size: 25upx;
	color: #666666;
	display: flex;
	flex-direction: row !important;
}
.title-detail text {
	padding: 0 10upx;
	border-right: 1px solid #000000;
}
.title-detail text:last-child {
	border-right: none;
}
.title-tag {
	padding: 10upx 0;
	height: 50upx;
	display: flex;
	align-items: center;
}
.title-tag text {
	background-color: #f2f0ee;
	font-size: 25upx;
	padding: 0 10upx;
	margin: 5upx 15upx 35upx 0;
	border-radius: 5upx;
	color: #7b6850;
}
.title-pri {
	display: flex;
	align-items: flex-end;
}
.title-pri text:nth-child(1) {
	font-size: 30upx;
	color: #6f8ac3;
	font-weight: bold;
	margin-right: 5upx;
}
.title-pri text:nth-child(2) {
	font-size: 20upx;
	color: #666666;
}
</style>
